<template>
  <div class="filtrate-wrapper" v-if="config">
    <div class="design-fee">
      <div class="title">设计收费</div>
      <div class="content">
        <ul>
          <li
            v-for="(item, index) of config.rate"
            :key="index"
            :class="{'active': rateActive === index}"
            @click="itemFeeClick(index, 'rate')"
          >{{ item.name }}</li>
        </ul>
      </div>
    </div>
    <div class="good_at">
      <div class="title">设计风格</div>
      <div class="content">
        <ul>
          <li
            v-for="(item) of config.styles"
            :key="item.name"
            :class="{'active': item.is_select}"
            @click="itemFeeClick(item, 'style')"
          >{{ item.name }}</li>
        </ul>
      </div>
    </div>
    <div class="design-type">
      <div class="title">设计类型</div>
      <div class="content">
        <ul>
          <li
            v-for="(item, index) of arr_design_type"
            :key="index"
            :class="{'active': formActive === index}"
            @click="itemFeeClick(index, 'form')"
          >{{ item.name }}</li>
        </ul>
      </div>
    </div>
    <div class="btn">
      <my-button name="确定" @btnClick="handleBtnClick" />
    </div>
  </div>
</template>
<script>
import ConfigList from '@/views/my/mixins/config-list'
export default {
  mixins: [ConfigList],
  data () {
    return {
      arr_design_type: [
        {
          name: '不限',
          form: 0
        },
        {
          name: '整装',
          form: 1
        },
        {
          name: '软装',
          form: 2
        }
      ],
      rateActive: 0,
      styleActive: 0,
      formActive: 0,
      ruleForm: {
        rate: '',
        form: '',
        style: ''
      },
      styles: [],
      isFilter: false
    }
  },
  watch: {
    config (newVal) {
      newVal.rate.unshift({ id: '', name: '不限' })
      newVal.styles.forEach((item, index) => {
        item.is_select = false
      })
      newVal.styles.unshift({ id: '', name: '不限' })
      newVal.styles[0].is_select = true
      this.styles.push(newVal.styles[0].id)
      this.ruleForm.style = this.styles.join(',')
    }
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    if (!this.isFilter) {
      this.ruleForm.rate = ''
      this.ruleForm.form = ''
      this.ruleForm.style = ''
      this.$emit('filterLeave')
    }
    next()
  },
  methods: {
    itemFeeClick (index, type) {
      switch (type) {
        case 'rate':
          this.rateActive = index
          this.ruleForm.rate = this.config.rate[index].id
          break
        case 'style':
          index.is_select = !index.is_select
          if (index.id) {
            this.config.styles[0].is_select = false
          }
          if (index.is_select && !this.styles.includes(index.id)) {
            this.styles.push(index.id)
          } else {
            const fIndex = this.styles.forEach((item) => {
              return item === index.id
            })
            if (fIndex >= 0) {
              this.styles.splice(fIndex, 1)
            }
          }
          this.$forceUpdate()
          break
        case 'form':
          this.ruleForm.form = this.arr_design_type[index].form
          this.formActive = index
          break
      }
    },
    handleBtnClick () {
      if (this.styles.length > 1 && !this.styles[0]) {
        this.styles.splice(0, 1)
      }
      if (this.styles.length) {
        this.ruleForm.style = this.styles.join(',')
      }
      this.isFilter = true
      this.$emit('filtrate', this.ruleForm)
      this.$router.back()
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
.filtrate-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  background: #fff;
  padding: 0.5rem 0.36rem;
  box-sizing: border-box;
  touch-action: none;
  .btn {
    width: 6.78rem;
    height: 0.8rem;
    position: absolute;
    @include hCenter();
    bottom: 0.7rem;
  }
}
.content {
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      padding: 0.1rem 0.2rem;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(153, 153, 153, 1);
      margin-right: 0.3rem;
      margin-bottom: 0.42rem;
      font-size: 0.28rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(0, 4, 0, 1);
      line-height: 0.42rem;
      &.active {
        border: 1px solid #000400;
        background: url("../../assets/images/icon_xuanzhong.png") no-repeat;
        background-position: right bottom;
        background-size: 0.3rem 0.2rem;
      }
    }
  }
}
.title {
  font-size: 0.32rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(4, 0, 0, 1);
  font-weight: bold;
  margin-bottom: 0.5rem;
}
</style>
